<extend name="Layout::index"/>
<block name="title">
    <title>到店预约</title>
</block>
<block name="content">
    <div class="yd">
        <div class="yd1">
            <div class="dq_bj">
                <div class="dq">当前位置：<a href="#">沪佳工厂店</a> > 预约到店</div>
            </div>
            <div class="yd2">
                <?php foreach( $arrPhoto as $val ): ?>
                    <div class=" yd4">
                        <button type="button" class="btn btn-primary btn-lg" data-toggle="modal"
                                data-target="#myModal<?php echo $val['number'] ?>"
                                style=" border:none; ">
                            <span class="yd3"> <a ><img src="__PUBLIC__/home/img/yydd_01.gif" width="119"
                                                                height="33"></a></span></button>
                        <a href="#"><img src="__PUBLIC__/upload/<?php echo $val['pic']  ?>" width="410" height="489"></a>
                    </div>
                    <!-- Modal -->
                    <div class="modal fade" id="myModal<?php echo $val['number'] ?>" tabindex="-1" role="dialog">
                        <div class="modal-dialog" style="width:738px; margin:50px auto">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal"><span
                                            aria-hidden="true">&times;</span><span class="sr-only"> </span></button>
                                </div>
                                <div class="modal-body">
                                    <!-- 内容 -->
                                    <div class="mtk_text_yd"><span style="color:#F00"><?php echo $val['name']; ?></span>在线到店预约</div>
                                    <input style="outline:none;" type="hidden" value="<?php echo $val['status']; ?>"
                                           class="js-status">
                                    <div class="mtk_k">
                                        <span style="float:left; font-size:16px; line-height:32px; padding-right:10px">姓名</span>
                                        <div class="mtk_k2"><input style="outline:none;" name="input2" type="text"
                                                                   size="35" placeholder="请输入您的姓名"
                                                                   onfocus="this.value=''" class="mtk_k3 js-name<?php echo $val['status']; ?>"/>
                                        </div>
                                    </div>
                                    <div class="mtk_k4">
                                        <span style="float:left; font-size:16px; line-height:32px; padding-right:10px">手机号码</span>
                                        <div class="mtk_k2"><input style="outline:none;" name="input2" type="text"
                                                                   size="35" placeholder="请输入您的手机号码" maxlength="11"
                                                                   onfocus="this.value=''" class="mtk_k3 js-mobile<?php echo $val['status'] ?>"/>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <div class="mtk7">闵行店已成功预约<span style="color:#F00; font-weight:bold"> 54485</span>
                                        位业主
                                    </div>
                                    <button onclick="func({$val['status']},{$val['number']})"
                                            style=" border:none; background-color:#FFF"><a href="#"><img
                                            src="__PUBLIC__/home/img/sjs.gif" width="124" height="34"></a></button>
                                </div>
                            </div>
                        </div>
                    </div>
               <?php endforeach ;  ?>

            </div>
        </div>
    </div>

    <script>

        function func(e,a){

            var jsn = 'js-name'+e;
            var jsm = 'js-mobile'+e;
            var name = Trim($("."+jsn).val());
            var mobile = Trim($("."+jsm).val());
            var number =e;
            if (name.length == 0) {
                alert('姓名不能为空');
                return false;
            }
            var phone = /^1[3|4|5|8|7][0-9]\d{8}$/;
            if (mobile.length = 0) {
                alert('号码不能为空');
                return false;
            }
            if (!phone.test(mobile)) {
                alert('号码有误！');
                return false;
            }
            function Trim(str) {
                return (str + '').replace(/(\s+)$/g, '').replace(/^\s+/g, '');
            }

            $.ajax({
                type: "POST",
                url: "{:U('Dy/order')}",
                data: {
                    status:number,
                    name: name,
                    mobile: mobile
                },
                dataType: "json",
                success: function (data) {
                    if (data == 1) {
                        $('#'+'myModal'+a).hide();
                        $('#myModal1').modal('toggle');
                    } else if (data == 3) {
                        alert('您已报名');
                    } else if (data == 2) {
                        alert('报名失败，请重新报名');
                    }
                }
            })
        }

    </script>
    <script>
        jQuery(document).ready(function ($) {
            $('.js-left>li:nth-child(3)').addClass('present');
        })
    </script>
</block>